<template>
  <div>
    <el-card>
      <el-row>
        <el-col align="right">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input
                  v-model="searchvalue"
                  clearable
                  @input="call"
                  placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button v-permission="['Admin','Sadmin','Salemanager','Saler','Other']"
                         @click="getList"
                         icon="el-icon-search"
                         type="primary">
                查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button v-permission="['Admin','Sadmin','Salemanager','Saler','Other']"
                         @click="dialogFormVisible = true;isbianji = true"
                         icon="el-icon-circle-plus-outline"
                         type="success">
                新增客户
              </el-button>
            </el-form-item>
            <el-button v-permission="['Admin','Sadmin','Salemanager']" type="primary" @click="export2Excel()">导出Excel
            </el-button>
          </el-form>
        </el-col>
      </el-row>
      <el-table
          border
          :data="list"
          style="width: 100%">
        <el-table-column type="expand" label="详情">
          <template slot-scope="{row}">
            <el-form label-position="left"
                     class="demo-table-expand">
              <el-descriptions title="详细信息">
                <el-descriptions-item label="客户姓名">{{ row.visitorName }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ row.telephone }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ row.sex }}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{ row.age }}</el-descriptions-item>
                <el-descriptions-item label="咨询课程">{{ row.askCourse }}</el-descriptions-item>
                <el-descriptions-item label="创量人">{{ row.genPeople }}</el-descriptions-item>
                <el-descriptions-item label="咨询来源类型">{{ row.contactType }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ row.comment }}</el-descriptions-item>
                <el-descriptions-item label="来源">{{ row.comefrom }}</el-descriptions-item>
                <el-descriptions-item label="居住地">{{ row.city }}</el-descriptions-item>
                <el-descriptions-item label="学历">{{ row.grade }}</el-descriptions-item>
                <el-descriptions-item label="毕业学校">{{ row.graduateSchool }}</el-descriptions-item>
                <el-descriptions-item label="家长电话">{{ row.parentTel }}</el-descriptions-item>
                <el-descriptions-item label="价格">{{ row.price }}</el-descriptions-item>
              </el-descriptions>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            prop="telephone"
            label="手机号"
            align="center">
          <template slot-scope="{row}">
            <el-link type="primary" :href="'tel:'+row.telephone">{{ row.telephone }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
            prop="visitorName"
            align="center"
            label="客户姓名">
        </el-table-column>
        <el-table-column
            prop="employeeName"
            align="center"
            label="分配员工">
        </el-table-column>
        <el-table-column
            prop="regEmpName"
            label="录入人"
            align="center">
        </el-table-column>
        <el-table-column
            prop="firstAskDate"
            align="center"
            label="首次咨询日期">
        </el-table-column>
        <el-table-column
            prop="comeDay"
            align="center"
            label="上门日期">
        </el-table-column>
        <el-table-column
            align="center"
            label="操作">
          <template slot-scope="{ row }">
            <el-button v-permission="['Admin','Sadmin','Salemanager']"
                       @click="bianji(row)"
                       type="primary"
                       size="mini">
              编辑
            </el-button>
            <el-button v-permission="[]"
                       @click="delcustomer(row.id)"
                       type="danger"
                       size="mini">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col align="right">
        <el-row style="margin:15px">
          <el-pagination
              background
              @current-change="currentChange"
              :current-page="page"
              :page-size="limit"
              layout="total,  prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </el-row>
      </el-col>
    </el-card>
    <el-dialog @close="close" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="客户姓名" label-width="100px" prop="visitorName">
          <el-input v-model="form.visitorName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="100px" prop="telephone">
          <el-input v-model="form.telephone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {addcustomer, customer, delcustomer, modifycustomer} from "../../api/customer";
import {deepClone, xx} from "../../uilts";

const getform = () => ({
  age: '',
  askCourse: "",
  city: "",
  comeAgenDay: "",
  comeDay: "",
  comeType: "",
  comefrom: "",
  comment: "",
  companyId: '1',
  contactType: "",
  dealDay: "",
  dealType: "",
  employeeId: '1',
  employeeName: '',
  firstAskDate: "",
  genPeople: "",
  grade: "",
  graduateSchool: "",
  keyword: "",
  lastCallDate: "",
  lastCallName: "",
  parentName: "",
  parentTel: "",
  price: '',
  profession: "",
  province: "",
  qq: "",
  recallAmount: '',
  recallDate: "",
  recordTime: "",
  regEmpId: '1',
  sex: "",
  siteUrl: "",
  status: "",
  telephone: "",
  visitorName: "",
  visitorType: ""
})
export default {
  name: "kehu",
  data() {
    return {
      list: [],
      searchvalue: '',//接收用户搜索的关键字
      page: 1, //当前页码
      total: 0,//总条数
      dialogFormVisible: false,
      isbianji: false,//编辑
      form: getform(),
      limit: 8,
      rules: {
        telephone: xx()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async export2Excel() {
      const res = await customer({
        limit: 10000
      })
      require.ensure([], () => {
        const {export_json_to_excel} = require("@/excel/Export2Excel");
        const fieldName = ["索引", "手机号", "咨询者姓名", "咨询课程", "年龄", "性别", "工作状态", "首次登陆的网址来源", "录入人姓名", "第一次咨询的时间", "回访时间", "回访次数", "qq", "省份", "专业", "价格", "家长电话", "家长姓名", "最后回访者名字", "最后回访时间", "通过网络来的关键字", "客户ID", "咨询者毕业学校", "学历", "创量人", "首次咨询日期", "分配员工姓名", "分配用户ID", "关单日期", "关单类型", "咨询来源类型", "公司ID", "备注", "量来源", "上门类型", "上门日期", "再次上门日期", "城市"];
        const filterVal = ["id", "telephone", "visitorName", "askCourse", "age", "sex", "status", "siteUrl", "regEmpName", "recordTime", "recallDate", "recallAmount", "qq", "province", "profession", "price", "parentTel", "parentName", "lastCallName", "keyword", "id", "graduateSchool", "grade", "genPeople", "firstAskDate", "employeeName", "employeeId", "dealDay", "dealType", "contactType", "companyId", "comment", "comefrom", "comeType", "comeDay", "comeAgenDay", "city"];
        const data = res.data.data.list.map(v => filterVal.map(j => v[j]));
        export_json_to_excel(fieldName, data, "客户列表");
      })
    },
    async getList() {
      const res = await customer({
        limit: 9,
        telephone: this.searchvalue,
        page: this.page
      })
      console.log(res.data.data)
      this.list = res.data.data.list
      // this.page = res.data.data.pageNum
      this.total = res.data.data.total
    },
    //查询
    call() {
      if (this.searchvalue === '') {
        this.getList()
      }
    },
    //翻页
    currentChange(pagee) {
      this.page = pagee
      this.getList()
    },
    //新增and修改
    bianji(row) {
      this.isbianji = false
      this.dialogFormVisible = true
      this.form = deepClone(row)
    },
    submit() {
      // console.log(this.$refs.form)
      this.$refs.form.validate(async (res) => {
        if (res) {
          if (this.isbianji) {
            await addcustomer(this.form)
          } else {
            await modifycustomer(this.form)
          }
          this.$message.success('操作成功！')
          this.dialogFormVisible = false
          await this.getList()
        }
      })
    },

    //删除
    delcustomer(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delcustomer(id)
        this.$message.success('删除成功！')
        await this.getList()

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    close() {
      this.form = getform()
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
</style>